<template>
  <div>
    <avue-crud
      :data="data.data"
      :option="option"
      :page.sync="page"
      @on-load="onLoad"
      @row-save="create"
      @row-del="remove"
      @row-update="update"
      @sort-change="sortChange"
      @search-change="searchChange"
    ></avue-crud>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import cloneDeep from 'lodash/cloneDeep'

@Component({})
export default class ResourceList extends Vue {
  @Prop(String) resource!: string

  data: any = {}
  option: any = {}
  page: any = {
    total: 0,
    // pageSize: parseInt(localStorage.getItem('pageSize')),
    // pageSizes: [3, 6, 9],
  }
  query: any = {
    page: 1,
    // sort: { _id: -1 },
  }

  created() {
    this.fetchOption()
    this.fetch()
  }

  async onLoad({ currentPage, pageSize }) {
    // console.log(page)
    this.query.page = currentPage
    this.query['limit'] = pageSize
    // localStorage.setItem('pageSize', pageSize)
    this.fetch()
  }

  async fetch() {
    const res = await this.$http.get(`${this.resource}`, {
      params: {
        query: this.query,
      },
    })
    console.log(`res.data`, res.data)
    this.data = res.data
    this.page.total = this.data['total']
  }

  async fetchOption() {
    const res = await this.$http.get(`${this.resource}/option`)
    this.option = res.data
  }

  // 新增数据后点击确定触发该事件
  async create(row, done) {
    await this.$http.post(`${this.resource}`, row)
    this.$message.success(`创建成功`)
    this.fetch()
    done()
  }

  // 编辑数据后确定触发该事件
  async update(row, index, done) {
    // const data = Object.assign({}, row)
    // const data = JSON.parse(JSON.stringify(row))
    // const data = { ...row }
    // const data = row
    const data = cloneDeep(row)
    delete data.$index // avue会自动给需要更新的对象添加这个方法
    try {
      await this.$http.put(`${this.resource}/${row._id}`, data)
    } catch (error) {
      console.log(`error`, error)
    }
    this.$message.success(`更新成功`)
    this.fetch()
    done()
  }

  // 行数据删除时触发该事件
  async remove(row) {
    try {
      await this.$confirm(`是否确认删除？`)
    } catch (e) {
      return
    }
    await this.$http.delete(`${this.resource}/${row._id}`)
    this.$message.success(`删除成功`)
    await this.fetch()
  }

  // 分页改变触法事件
  async sortChange({ prop, order }) {
    // console.log(list)
    if (!order) {
      this.query['sort'] = null
    } else {
      this.query['sort'] = {
        [prop]: order === 'ascending' ? 1 : -1,
      }
    }
    this.fetch()
  }

  // 搜索
  async searchChange(params, done) {
    // this.query['where'] = params
    Reflect.ownKeys(params).forEach((key) => {
      // 查找colum配置当中对应的列
      const column = this.option.column.find((col) => col.prop === key)

      // whether column.regex is exist and equal to boolean true
      if (column.regex) {
        params[key] = { $regex: params[key] }
      }
    })

    this.query.where = params
    this.fetch()
    done()
  }
}
</script>

<style scoped></style>
